<template>
	<div class="carousels f-l">
		<div class="leftBtn" ref="leftArrow" @click="leftArrow">
			<i class="ico ico-left"></i>
		</div>
		<div class="rightBtn" ref="rightArrow" @click="rightArrow">
			<i class="ico ico-right"></i>
		</div>
		<div class="pics" ref="picList">
			<div class="picItem f-l" v-for="(item,key) in journals" :key="key" :style="styles[key]">
				<img :src="item.picUrl" alt="" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Carousels',
	data() {
		return {
			journals:[
				{
					picUrl:'/assets/images/banner1.jpg',
					name:'正月迎春花开放'
				},
				{
					picUrl:'/assets/images/banner2.jpg',
					name:'二月丁香白如银'
				},
				{
					picUrl:'/assets/images/banner3.jpg',
					name:'三月桃花娇又艳'
				},
				{
					picUrl:'/assets/images/banner4.jpg',
					name:'四月牡丹送残春'
				},
				{
					picUrl:'/assets/images/banner5.jpg',
					name:'五月石榴红似火'
				},
				{
					picUrl:'/assets/images/banner6.jpg',
					name:'六月芙蓉出水新'
				},
				{
					picUrl:'/assets/images/banner7.jpg',
					name:'七月天竹叶上滚'
				}
			],
			styles:[
				{
					marginLeft:'-425px',
					zIndex:0,
					transition:'all 400ms ease 0s',
					opacity:0.7,
					transform: 'perspective(500px) rotateY(45deg)',
					height:'180px',
					top:'30px'
				},
				{
					marginLeft:'-322.5px',
					zIndex:1,
					transition:'all 400ms ease 0s',
					opacity:0.8,
					transform: 'perspective(500px) rotateY(45deg)',
					height:'180px',
					top:'30px'
				},
				{
					marginLeft:'-225px',
					zIndex:2,
					transition:'all 400ms ease 0s',
					opacity:0.9,
					transform: 'perspective(500px) rotateY(45deg)',
					height:'180px',
					top:'30px'
				},
				{
					marginLeft:'-97.5px',
					zIndex:3,
					transition:'all 400ms ease 0s'
				},
				{
					marginLeft:'30px',
					zIndex:2,
					transition:'all 400ms ease 0s',
					opacity:0.9,
					transform: 'perspective(500px) rotateY(-45deg)',
					height:'180px',
					top:'30px'
				},
				{
					marginLeft:'127.5px',
					zIndex:1,
					transition:'all 400ms ease 0s',
					opacity:0.8,
					transform: 'perspective(500px) rotateY(-45deg)',
					height:'180px',
					top:'30px'
				},
				{
					marginLeft:'225px',
					zIndex:0,
					transition:'all 400ms ease 0s',
					opacity:0.7,
					transform: 'perspective(500px) rotateY(-45deg)',
					height:'180px',
					top:'30px'
				}
			]
		}
	},
	methods:{
		
		leftArrow() {
			var outStyles = this.styles.slice(0,1);
			var lastStyles = this.styles.splice(1,this.styles.length-1);
			var newStyles = lastStyles.concat(outStyles);
			this.styles = newStyles;
		},

		rightArrow() {
			var lastStyles = this.styles.slice(0,this.styles.length-1);
			var outStyles = this.styles.slice(this.styles.length-1,this.styles.length);
			var newStyles = outStyles.concat(lastStyles);
			this.styles = newStyles;
		}
	}
}
</script>

<style scoped lang="scss">
.ico {
	background:url(~@/assets/images/icons.png);
	display: inline-block;
}
.carousels {
    width:880px;
    height:306px;
	margin:0 auto;
    padding-top:38px;
    position: relative;
    .pics {
        width:840px;
        height:230px;
        margin:0 auto;
        overflow: hidden;
        position: relative;
    }
    .picItem {
        width:195px;
        text-align: center;
        height:230px;
        position: absolute;
        top:0;
        left:50%;
        margin-left:-97.5px;
        border-radius: 20px;
        overflow: hidden;
        img {            
            border-radius: 20px;
            height:230px;
        }
    }


    .leftBtn {
        position: absolute;
        width:47px;
        height:56px;
        background: rgba(0,0,0,0.3);
        top:50%;
        margin-top: -28px;
        z-index: 5;
        cursor: pointer;
        .ico-left {
            width:31px;
            height:31px;
            background-position: 0 0;
            position: relative;
            left:8px;
            top:12px;
        }
    }
    .rightBtn {
        position: absolute;
        width:47px;
        height:56px;
        background: rgba(0,0,0,0.3);
        top:50%;
        margin-top: -28px;
        right:3px;
        z-index: 5;
        cursor: pointer;
        .ico-right {
            width:31px;
            height:31px;
            background-position: -32px 0;
            position: relative;
            left:8px;
            top:12px;
        }
    }
    .title {
        text-align: center;
        height:40px;
        line-height: 40px;
        font-size: 16px;
        color:#fff;
    }
}
</style>
